<template>
  <div>
    <el-card class="box-card">
      <span>关键字</span>
      <el-input
        class="left"
        v-model="queryInfo.keyword"
        placeholder="根据文章标题搜索">
      </el-input>
      <span class="size">状态</span>
      <template>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in item"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <el-button size="mini" @click="clear">清除</el-button>
      <el-button size="mini" type="primary" @click="getArticlesList">搜索</el-button>
      <el-button class="right-btn" type="success" icon="el-icon-edit" size="mini" @click="addArticles">新增技巧</el-button>
      <div>
        <el-alert
          :title=" '数据一共'+ total+ '条'"
          type="info"
          :closable="false"
          show-icon>
        </el-alert>
      </div>
      <template>
        <el-table
          :data="articlesList"
          stripe
          style="width: 100%">
          <!-- <el-table-column>{{articlesList.videoURL}}</el-table-column> -->
          <el-table-column
            type="index"
            label="序号"
            width="100">
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="400">
            <template slot-scope="scope">
              <div>
              {{scope.row.title}}
              </div>
            </template>
            <!-- <span>{{articlesList.videoURL}}</span> -->
          </el-table-column>
          <el-table-column
            prop="visits"
            label="阅读数">
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人">
          </el-table-column>
          <el-table-column
              label="录入时间">
            <template slot-scope="scope">
                {{ getTime(new Date(scope.row.createTime))}}
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="80">
            <template slot-scope="scope">
              <span v-if="!scope.row.state">已禁用</span>
              <span v-else>已启用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="previewDialogShow(scope.row)" type="text">预览</el-button>
              <el-button
                type="text"
                v-if="scope.row.state === 1"
                @click="editBtn(scope.row)"
              >禁用</el-button>
              <el-button
                type="text"
                v-else
                @click="editBtn(scope.row)"
                >启用</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? true : false"
                @click="editDialogShow(scope.row)"
                >修改</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1 ? true : false"
                @click="delArticle(scope.row)"
                >删除</el-button>
            </template> 
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next, jumper"
        background
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 新增技巧对话框 -->
    <el-dialog
      @close="addClose"
      title="新增文章"
      :visible.sync="addDialogVisible"
      width="40%">
      <el-form :model="addBody" :rules="rules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="addBody.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="文章内容" style="height: 300px" prop="articleBody">
            <quill-editor :options="editorOption" v-model="addBody.articleBody" style="height: 200px"></quill-editor>
          </el-form-item>
        </div>
        <el-form-item label="视频地址">
          <el-input v-model="addBody.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickAddArticles">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewDialogVisible"
      width="40%">
      <div>
        <h2>{{ articlesDetails.title }}</h2>
        <span>{{ getTime(new Date(articlesDetails.createTime)) }}</span>
        <span> 超级管理员 </span>
        <span>
          <i class="el-icon-view"></i>
          {{ articlesDetails.visits }}
        </span>
        <p v-html="articlesDetails.articleBody"></p>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      @close="editClose"
      title="修改文章"
      :visible.sync="ededitDialogVisible"
      width="40%">
      <el-form :model="editBody" :rules="rules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="articlesDetails.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <div>
          <el-form-item label="文章内容" style="height: 300px" prop="articleBody">
            <quill-editor :options="editorOption" v-model="articlesDetails.articleBody" style="height: 200px"></quill-editor>
          </el-form-item>
        </div>
        <el-form-item label="视频地址">
          <el-input v-model="articlesDetails.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ededitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editArticle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove, detail, update, add } from '@/api/hmmm/articles'
import { parseTime } from '@/filters/index'
export default {
  data () {
    return {
      // 文章数据库
      articlesList: [],
      // 数据请求参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      flag: true,
      item: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      value: '',
      total: 0,
      // 新增技巧显示与隐藏
      addDialogVisible: false,
      rules: {
        title: [
          { required: true, message: '请输入文章标签', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        ],
      },
      // 新增技巧数据
      addBody: {
        id: '',
        title: '',
        videoURL: '',
        articleBody: ''
      },
      // 富文本编辑器
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            // [{ script: 'sub' }, { script: 'super' }], // 上下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除字体样式
            ['image', 'link'] // 上传图片、上传视频
          ]
        },
        theme: 'snow'
      },
      // 预览显示与隐藏
      previewDialogVisible: false,
      // 文章详情数据
      articlesDetails: {},
      // 修改显示与隐藏
      ededitDialogVisible: false,
      // 修改参数所需数据
      editBody: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: null
      }
    }
  },

  created () {
    this.getArticlesList()
  },
  methods: {
    // 获取文章列表
    getArticlesList () {
      // console.log(this.value)
      if (this.value === '') {
        // console.log(this.value)
        list(this.queryInfo).then((res) => {
          this.articlesList = res.data.items
          this.total = res.data.counts
        // console.log(res.data)
        })
      } else if (this.value === '1') {
        // console.log(this.value)
        this.queryInfo.state = 1
        list(this.queryInfo).then((res) => {
          this.articlesList = res.data.items
          this.total = res.data.counts
        // console.log(res.data)
        })
      } else {
        // console.log(this.value)
        this.queryInfo.state = 0
        list(this.queryInfo).then((res) => {
          this.articlesList = res.data.items
          this.total = res.data.counts
        // console.log(res.data.items)
        })
      }
    },
    // 获取时间
    getTime (time) {
      return parseTime(time)
    },
    // 改变每页条数
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getArticlesList()
    },
    // 改变页码
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getArticlesList()
    },
    // 清除状态搜索框
    clear () {
      this.value = '',
      this.queryInfo.keyword = '',
      this.queryInfo.state = null,
      this.getArticlesList()
    },
    // 新增技巧
    addArticles () {
      this.addDialogVisible = true
    },
    // 点击确定添加
    clickAddArticles () {
      this.$refs.editFormRef.validate(async flag => {
        if (!flag) return
        const res  = await add(this.addBody)
        if (res.status !== 200) return this.$message.error('创建用户失败')
        this.addDialogVisible = false
        this.$message.success('创建用户成功')
        this.getArticlesList()
        this.addBody.title = ''
        this.addBody.videoURL = ''
        this.addBody.articleBody = ''
      })
    },
    // 预览
    previewDialogShow (row) {
      this.previewDialogVisible = true
      this.getArticlesDetails(row)
    },
    // 获取文章详情
    getArticlesDetails (row) {
      detail({ id: row.id }).then((res) => {
        this.articlesDetails = res.data
        this.editBody.articleBody = res.data.articleBody
        this.editBody.title = res.data.title
        this.editBody.videoURL = res.data.videoURL
      })
    },
    // 修改按钮状态按钮
    async editBtn (row) {
      const state = row.state === 0 ? 1 : 0
      const res = await changeState({ id: row.id, state: state})
      if (res.data.success) {
        this.$message.success('操作成功')
        row.state = state
      }
    },
    // 点击修改按钮
    editDialogShow (row) {
      this.ededitDialogVisible = true
      this.getArticlesDetails(row)
      this.editBody.id = row.id
    },
    // 点击修改确定按钮
    editArticle () {
      this.editBody.articleBody = this.articlesDetails.articleBody
      this.editBody.title = this.articlesDetails.title
      this.editBody.videoURL = this.articlesDetails.videoURL
      this.$refs.editFormRef.validate(async flag => {
        if (!flag) return
        const res  = await update(this.editBody)
        // console.log(res)
        if (res.status !== 200) return this.$message.error('操作失败')
        this.ededitDialogVisible = false
        this.$message.success('操作成功')
        this.getArticlesList()
      })
    },
    // 点击删除
    async delArticle (id) {
      const res = await remove( id )
      // console.log(res)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getArticlesList()
        this.$message.success( '删除成功!')
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 重置添加表单
    addClose () {
      this.$refs.editFormRef.resetFields()
    },
  // 重置修改表单
  editClose () {
    this.$refs.editFormRef.resetFields()
  }    
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 10px;
  .size{
    font-size: 15px;
    font-weight: 700;
  }
  span {
    margin-right: 15px;
  }
  .left {
    margin-right: 30px;
  }
  .el-input {
    width: 200px;
  }
  .el-select {
    margin-right: 15px;
  }
  .right-btn {
    float: right;
  }
  .el-alert {
    margin-top: 15px;
  }
  .el-pagination {
    float: right;
  }
  .el-pagination__total {
    display: none;
  }
  .ql-editor {
    height: 400px !important;
  }
}

</style>
